<template>
  <div class="qk-goods"
       :class="{marginTop10: prop.marginFlag=='true'}">
    <productItem :productdata="goodslist"
                 :flex="prop.flex+''"></productItem>
  </div>
</template>
<script>
import { getGoodsListByIds } from "@/api/base/goods/goods";
import productItem from "./product/productItem.vue";
import { mapState } from "vuex";
export default {
  components: {
    productItem
  },
  computed: {
    qkGoodsList () {
      return this.$store.state.editor.qkGoodsList
    }
  },
  watch: {
    qkGoodsList: {
      handler (n) {
        //取数据
        let ids = []
        n.forEach(i => {
          ids.push(i.id)
        })
        if (ids.length > 0) {
          //发请求
          let obj = {
            goodsIds: ids
          }
          getGoodsListByIds(obj).then(res => {
            if (res.data.code == 200) {
              this.goodslist = res.data.data
            }
          })
        }
      },
      deep: true,
    }
  },
  name: 'qkGoods', // 这个名字很重要，它就是未来的标签名<qk-text></qk-text>
  props: {
    prop: {
      type: Object,
      default () {
        return {
          goodsList: [],
          flex: '1',
          marginFlag: 'true',
        }
      }
    }
  },

  data () {
    return {
      goodslist: [],
    }
  },
  methods: {
    //获取店家设置的商品数据
    init () {
      let ids = []
      this.prop.goodsList.forEach(i => {
        ids.push(i.id)
      })
      if (ids.length > 0) {
        //发请求
        let obj = {
          goodsIds: ids
        }
        getGoodsListByIds(obj).then(res => {
          if (res.data.code == 200) {
            this.goodslist = res.data.data
          } else {
            this.goodslist = this.prop.goodsList
          }
        })
      }
    },
  },
  created () {
    this.init()
  },
}
</script>
<style lang="scss" scoped>
.marginTop10 {
  margin-top: 10px;
}
</style>